<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Elix ListBox as horizontal list</title>

    <link rel="stylesheet" href="demos.css" />
    <script type="module" src="../define/ListBox.js"></script>
  </head>

  <body role="main">
    <p>
      This horizontally-scrolling list can be navigated with the keyboard, too.
    </p>
    <div class="demo" style="width: 252px;">
      <style>
        .emoji {
          align-items: center;
          display: flex;
          flex-shrink: 0;
          font-size: 36px;
          height: 50px;
          justify-content: center;
          padding: 0 !important;
          width: 50px;
        }
      </style>

      <elix-list-box orientation="horizontal" aria-label="Face emoji">
        <div class="emoji" alt="Grinning Face">😀</div>
        <div class="emoji" alt="Grinning Face With Smiling Eyes">😁</div>
        <div class="emoji" alt="Face With Tears of Joy">😂</div>
        <div class="emoji" alt="Smiling Face With Heart-eyes">😍</div>
        <div class="emoji" alt="Smiling Face With Smiling Eyes">😊</div>
        <div class="emoji" alt="Thinking Face">🤔</div>
        <div class="emoji" alt="Smiling Face With Open Mouth & Closed Eyes">
          😆
        </div>
        <div class="emoji" alt="Face With Open Mouth">😮</div>
        <div class="emoji" alt="Face With Rolling Eyes">🙄</div>
        <div class="emoji" alt="Face Blowing a Kiss">😘</div>
      </elix-list-box>
    </div>
  </body>
</html>
